<template>
  <a-tabs size="small" class="mpd-side-panel-base-config height-full" :tabBarGutter="0">
    <a-tab-pane key="General" tab="常规" class="height-full">
      <scroll-container>
        <!-- 标题 -->
        <div>
          <h6 class="margin-xs">
            <span>标题</span>
            <span class="text-color-gray text-size-sm">
              (component:{{ selectPageNodeDom[actionItem.selectItemKey].mpdConfig.component }})
            </span>
          </h6>
          <a-input v-model="selectPageNodeDom[actionItem.selectItemKey].title" placeholder="请输入标题" />
        </div>
        <!-- Text -->
        <div>
          <h6 class="margin-xs">
            <a-popover placement="left" :overlayStyle="{ maxWidth: '300px' }" :destroyTooltipOnHide="true">
              <mpd-icon class="cursor-pointer margin-r-xs" icon="mpd-icon-question" style="font-size: 14px"></mpd-icon>
              <template #content>
                <div style="word-wrap: break-word">
                  【部分带有slot标签的组件支持】该输入框支持：${}，表达式取对应变量，原理是用计算属性computed实现的，所以要加this，比如：这是文字${this.mpdPageValue}
                </div>
              </template>
            </a-popover>
            <span>Text</span>
          </h6>
          <a-textarea
            v-model="selectPageNodeDom[actionItem.selectItemKey].mpdConfig.text"
            placeholder="放入标签的text内容"
            :rows="4"
          />
        </div>
        <!-- 自定义配置 -->
        <div class="margin-b-xs" v-for="(item, index2) in actionItem.base.general" :key="index2">
          <component-config :item="item" :actionItem="actionItem"></component-config>
        </div>
      </scroll-container>
    </a-tab-pane>
    <a-tab-pane key="style" tab="外观" class="height-full">
      <scroll-container>
        <!-- v-if -->
        <div>
          <h6 class="margin-xs">
            <a-popover placement="left" :overlayStyle="{ maxWidth: '300px' }" :destroyTooltipOnHide="true">
              <mpd-icon class="cursor-pointer margin-r-xs" icon="mpd-icon-question" style="font-size: 14px"></mpd-icon>
              <template #content>
                <div style="word-wrap: break-word">该值会放入eval中执行</div>
              </template>
            </a-popover>
            <span>是否渲染</span>
            <span class="text-color-gray text-size-sm">(v-if)</span>
          </h6>
          <a-input v-model="selectPageNodeDom[actionItem.selectItemKey].mpdConfig.vIf" />
        </div>
        <!-- v-show -->
        <div>
          <h6 class="margin-xs">
            <a-popover placement="left" :overlayStyle="{ maxWidth: '300px' }" :destroyTooltipOnHide="true">
              <mpd-icon class="cursor-pointer margin-r-xs" icon="mpd-icon-question" style="font-size: 14px"></mpd-icon>
              <template #content>
                <div style="word-wrap: break-word">该值会放入eval中执行</div>
              </template>
            </a-popover>
            <span>是否显示</span>
            <span class="text-color-gray text-size-sm">(v-show)</span>
          </h6>
          <a-input v-model="selectPageNodeDom[actionItem.selectItemKey].mpdConfig.vShow" />
        </div>
        <!-- Class -->
        <div>
          <h6 class="margin-xs">Class</h6>
          <a-textarea
            v-model="selectPageNodeDom[actionItem.selectItemKey].mpdConfig.class"
            placeholder="可输入多个类名"
            :rows="4"
          />
        </div>
        <!-- Style -->
        <key-value-manage
          v-model="selectPageNodeDom[actionItem.selectItemKey].mpdConfig.style"
          title="Style"
          :keyEnum="CssKeyMiunsJson"
        ></key-value-manage>
      </scroll-container>
    </a-tab-pane>
    <a-tab-pane v-for="(item1, index1) in actionItem.base.tabs" :key="index1" :tab="item1.name" class="height-full">
      <scroll-container>
        <div class="margin-b-xs" v-for="(item2, index2) in item1.children" :key="index2">
          <component-config :item="item2" :actionItem="actionItem"></component-config>
        </div>
      </scroll-container>
    </a-tab-pane>
  </a-tabs>
</template>

<script>
import KeyValueManage from './components/KeyValueManage.vue'
import CssKeyMiunsJson from '@/json/css/css-key-minus'
import ComponentConfig from './components/ComponentConfig'

export default {
  components: {
    KeyValueManage,
    ComponentConfig
  },
  props: {
    actionItem: {
      type: Object,
      required: true
    }
  },
  inject: ['selectPageNodeDom'],
  data() {
    return {
      CssKeyMiunsJson
    }
  }
}
</script>

<style lang="less">
.mpd-side-panel-base-config {
  .ant-tabs-bar {
    margin: 0;
  }
  .ant-tabs-content {
    height: calc(100% - 40px);
  }
}
</style>
